import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Row, Select, InputNumber, Tooltip, Icon, Radio, message, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import UploadPic from '@/components/UploadPic'
import { formItemLayout } from '@/utils/utils'
import cities from '@/utils/city'
import {
  fetchInvList,
} from '@/services/setting/inv'

const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))
const { Option } = Select

const InvConfig = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [data, setData] = useState([])
  const [cityCode, setCityCode] = useState('')

  useEffect(() => {
    init()
  }, [])

  const init = async (params) => {
    const res = await fetchInvList(params)
    res.code == 0 ? setData(res.data) : message.warning(res.msg)
  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return(
      <Col span={8}>
        <Form.Item label={`名称`}>
          {getFieldDecorator(`id`, {})
            (<Input />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    
  }
  return (
    <PageHeaderWrapper>
      {/* <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} /> */}
      <RenderButtom click={handleBtn} />
      <Form {...formItemLayout}>
        <Row>
          <Col span={8}>
            <Form.Item label="所在省市">
              {getFieldDecorator('regionCode', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Select onChange={val => setCityCode(val)}>
                {
                  cities.map(c =>
                    <Option key={c.code} value={c.code.substring(0, 2)}>{c.value}</Option>  
                  )
                }
              </Select>)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="详细地址">
              {getFieldDecorator('address', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <Form.Item label="地区编号">
              {getFieldDecorator('regionCode', {
                initialValue: cityCode,
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<InputNumber />)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="联系人">
              {getFieldDecorator('contactsName', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <Form.Item label="开票人">
              {getFieldDecorator('drawer', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="联系电话">
              {getFieldDecorator('phone', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <Form.Item label="企业名称">
              {getFieldDecorator('taxpayerName', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="企业法人">
              {getFieldDecorator('legalPersonName', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <Form.Item label="银行名称">
              {getFieldDecorator('bankName', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="银行账号">
              {getFieldDecorator('bankAccount', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <Form.Item label="收款人">
              {getFieldDecorator('payee', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="复核人">
              {getFieldDecorator('reviewer', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <Form.Item label="税盘号">
              {getFieldDecorator('machineNo', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Input 
                  suffix={
                    <Tooltip 
                      title="税盘号说明：
                    要区别航信金税盘(白色)和百旺税控盘(黑色)（请咨询财务）；
                     1、使用云票儿发票助手专业版：航信主盘传0，航信分盘传分机号，如：1、2、3等。百旺传12位盘号（前面的33-或44-不用输入）；
                        2、使用云票儿发票助手普通版：航信与百旺都传12位盘号（前面的33-或44-不用输入）。"
                    >
                      <Icon type="info-circle" style={{ color: 'rgba(0,0,0,.45)' }} />
                    </Tooltip>
                  }
              />)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="纳税人识别号">
              {getFieldDecorator('taxpayerNum', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <Form.Item label="联系人邮箱地址">
              {getFieldDecorator('email', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="企业电话">
              {getFieldDecorator('businessMobile', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <Form.Item label="税务登记证">
              {getFieldDecorator('taxRegistrationCertificate', {
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<UploadPic />)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="是否手动审核">
              {getFieldDecorator('audit', {
              })(<Radio.Group>
                  <Radio value={'1'}>是</Radio>
                  <Radio value={'2'}>否</Radio>
              </Radio.Group>)}
            </Form.Item>
          </Col>
          <Col>
            <Button type="primary" style={{marginRight: 10}}>修改</Button>
            <Tooltip            
              title="修改审核方式直接点上方的修改即可，不需要点下方的保存按钮"
            >
              <Icon type="info-circle" style={{ color: 'rgba(255,0,0)' }} />
            </Tooltip>
          </Col>
        </Row>
        <Button type="primary">保存</Button>
      </Form>
    </PageHeaderWrapper>
    )
}

export default Form.create()(InvConfig)
